<template>
  <ElDialog :model-value="modelValue" title="删除提示" width="40%" @close="onClose">
    <section>确认删除吗？</section>
    <template #footer>
      <ElButton @click="onDelete" type="danger">删除</ElButton>
      <ElButton @click="onCancel">取消</ElButton>
    </template>
  </ElDialog>
</template>
<script lang="ts">
import { onMounted, defineComponent, reactive, ref, onUnmounted } from 'vue'
import { ElDialog, ElButton } from 'element-plus'
let callback: Function = null
let close: Function = null
export function useDeleteConfirm(cb: Function, cl: Function) {
  callback = cb
  close = cl
}
export default defineComponent({
  components: { ElDialog, ElButton },
  setup(props, { emit }) {
    const modelValue = ref(true)
    function onClose() {
      emit('close')
      close()
    }
    function onDelete() {
      emit('confirm')
      callback()
      close()
    }
    function onCancel() {
      emit('cancel')
      close()
    }
    // onUnmounted(() => {
    //   console.log('this is unmouted')
    // })
    return {
      modelValue,
      onClose,
      onDelete,
      onCancel,
    }
  },
})
</script>
<style lang="less"></style>
